import { Component } from "react";

// react 生命周期
// 1. 初始化阶段
//    getDefaultProps 获取默认的props参数，不是一个钩子（类组件不能写，底层自己做）
//    getInitialState 获取初始化的State,不是一个钩子（类组件不能写，底层自己做）
//    componentWillMount(UNSAFE_componentWillMount)：
//    渲染之前，（不安全钩子，尽量不要用），已经有了props和State,但是没有DOM元素
//    render 渲染
//    componentDidMount 渲染完成, 有了DOM元素（发送ajax,走更新阶段，重新执行渲染)
// 2. 更新阶段
//    state更新：
//    shouldComponentUpdate 是否更新， 默认情况下，返回true（更新），可以手动设置为false（不更新）
//    两个参数 newProps,newState 最新修改的数据的值
//    UcomponentWillUpdate(UNSAFE_componentWillUpdate):更新之前（不安全钩子，尽量不要用）
//    render 渲染
//    componentDidUpdate 更新之后
//    注意：forceUpdate 强制更新，不会执行shouldComponentUpdate这个钩子

//    props更新：
//    componentWillReceiveProps(UNSAFE_componentWillReceiveProps):将要接收props （不安全钩子，尽量不要用）
//    shouldComponentUpdate 是否更新， 默认情况下，返回true（更新），可以手动设置为false（不更新）
//    两个参数 newProps,newState 最新修改的数据的值
//    UcomponentWillUpdate(UNSAFE_componentWillUpdate):更新之前（不安全钩子，尽量不要用）
//    render 渲染
//    componentDidUpdate 更新之后

// 3. 销毁阶段
// componentWillUnmount:将要销毁

export default class One extends Component{
    state={
        n:100
    }
    UNSAFE_componentWillMount(){
       console.log("渲染之前")
    }
    render(){
        console.log("渲染")
        return <div>
            <h1>类组件---{this.state.n}</h1>
            <h1>{this.props.m}</h1>
        </div>
    }
    componentDidMount(){
        console.log("渲染完成")
        this.setState({
            n:200
        },()=>{//更新生命周期钩子完成后在输出，为了保证更新阶段的完整性，才最后输出
            console.log("更新结束了,哈哈哈");
        })
        // this.state.n=300;
        // this.forceUpdate();
    }
    UNSAFE_componentWillReceiveProps(){
        console.log("将要接受props");
    }
    shouldComponentUpdate(newProps,newState){//默认情况下，返回true
        console.log(newState);
        console.log("是否更新");
        return true;
    }
    UNSAFE_componentWillUpdate(){
        console.log("更新之前");
    }
    componentDidUpdate(){
        console.log("更新之后");
    }
    componentWillUnmount(){
        console.log("将要销毁该组件");
    }
}